<template>
  <div class="header">
    <div class="box">
      <span>TodoList</span>
      <!-- 绑定回车事件，v-model绑定输入框的value值 -->
      <input
        type="text"
        v-model="inputVal"
        @keydown.enter="enterEvent"
        placeholder="添加代办事件"
        maxlength="25"
      />
    </div>
  </div>
</template>

<script>
export default {
  // props: ["addList"],
  data() {
    return {
      inputVal: "",
    };
  },
  methods: {
    enterEvent() {
      // 校验数据
      if (!this.inputVal.trim()) return alert("输入不能为空！");
      // this.addList(this.inputVal);
      this.$emit("addList", this.inputVal);

      //清除输入框的值
      this.inputVal = "";
    },
  },
};
</script>

<style scoped>
/* 头部 */
.header {
  /* width: 100vw; */
  height: 60px;
  background-color: #323232;
}
.box {
  width: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header span {
  color: #eee;
  font-size: 26px;
  line-height: 60px;
}
.header input {
  width: 300px;
  height: 20px;
  padding-left: 5px;
  border-radius: 2px;
  border: none;
  box-shadow: 0px 0px 7px #8e8e8e inset;
}
</style>